<template>
  <div class="select-item select-item-special select-item-search common-select">
    <el-popover popper-class="sameSelect"
      placement="bottom"
      :width="290"
      :visible-arrow="false"
      @show="popIsFocus = true"
      @hide="popIsFocus = false"
      ref="selectSearch"
      trigger="click">
      <div class="list-box">
        <div class="ipt-box">
          <el-input :placeholder="$t('searchContent')"
            class="select-search-input"
            prefix-icon="el-icon-search"
            v-model="keyVal"></el-input>
        </div>
        <div class="list">
          <div class="list-inner">
            <div class="sidebar-wrap-inner">
              <template>
                <div class="search-empty"
                  v-if="!listsOption || listsOption.length === 0">
                  {{ $t("noResult") }}
                </div>
                <div class="list-item"
                  v-else>
                  <!-- <common-link :path="$route.params.lang?$route.path.replace(`/${$route.params.lang}`,''):$route.path"
                      :query="resetPath(item)"
                      v-for="(item, key) in listsOption"
                      :key="`${key}-${item.value}`">
                      <label class="el-checkbox"
                        :class="{'is-checked': $route.query[queryName] && item.value === $route.query[queryName]}">
                        <span class="el-checkbox__input"
                          :class="{'is-checked': $route.query[queryName] && item.value === $route.query[queryName]}">
                          <span class="el-checkbox__inner"></span>
                          <input type="checkbox"
                            class="el-checkbox__original">
                        </span>
                        <span class="el-checkbox__label">
                          <img v-if="hasIcon"
                            :src="getImage(item.value)"
                            class="checkbox-image"
                            :alt="item.label"
                            srcset="" />
                          <span>
                            {{ item.label }}
                          </span>
                        </span>
                      </label>
                    </common-link> -->
                  <!-- <search-item v-for="(item, key) in listsOption"
                      :hasIcon="hasIcon"
                      :key="`${key}-${item.value}`"
                      :searchItemData="item"
                      :queryName="queryName"></search-item> -->

                  <virtual-list style="height: 270px; overflow-y: auto;"
                    ref="virtual"
                    :data-key="'value'"
                    :data-sources="listsOption"
                    :data-component="itemComponent"
                    :extra-props="{
                        hasIcon:hasIcon,
                        queryName:queryName
                      }" />
                </div>
              </template>
            </div>
          </div>
        </div>
        <div class="select-footer">
          <el-button type="primary"
            class="btn-reset to-reset-country"
            size="mini"
            @click="handleClearAllSelected"
            icon="el-icon-close
    ">
            {{ $t("btnReset") }}
          </el-button>
        </div>
      </div>
      <template v-slot:reference>
        <div class="el-select select-region"
          :class="{
           'hasVal': hasVal
          }">
          <div class="el-input"
            :class="{
              'is-focus': popIsFocus
            }">
            <div :class="{'selected':hasVal}"
              class="group">
              <button type="button"
                class="dropdown inline-flex items-center w-full justify-center bg-gray-2100 px-3 text-sm font-medium text-gray-1000 hover:bg-purple-100 hover:bg-purple-1300 hover:text-white group-hover:bg-purple-1300 group-hover:text-white">
                <span class="whitespace-nowrap truncate"
                  v-if="hasVal">{{ $route.query[queryName] | fLabel(options, valueIsLabel) }}</span>
                <span class="whitespace-nowrap truncate"
                  v-else>{{ placeholder }}</span>
                <svg class="-mr-1 ml-2 h-5 w-5 arrow"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                  :class="{show: popIsFocus}">
                  <path fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </button>

              <span @click.stop="clear"
                class="to-reset-country"
                v-if="hasVal">
                <svg-icon className="delBtn"
                  iconName='delete_white'></svg-icon>
              </span>
            </div>
          </div>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script>
import SearchItem from '~/components/SearchItem.vue'
import VirtualList from 'vue-virtual-scroll-list'
export default {
  name: 'SelectSearch',
  components: { VirtualList },
  props: {
    options: {
      require: true,
      type: Array,
      defalut() {
        return []
      },
    },
    hasIcon: {
      type: Boolean,
      defalut: false,
    },
    placeholder: {
      type: String,
      defalut: '',
    },
    valueIsLabel: {
      type: Boolean,
      defalut: false,
    },
    queryName: {
      type: String,
      defalut: '',
      require: true,
    },
  },
  filters: {
    fLabel: function (val, options, valueIsLabel) {
      let res = options.find((item) => {
        return valueIsLabel ? item.label === val : item.value === val
      })
      if (res && res.label) {
        return res.label
      } else {
        return val
      }
    },
  },
  data() {
    return {
      popIsFocus: false,
      keyVal: null,
      checkList: [],

      itemComponent: SearchItem,
    }
  },
  watch: {
    $route: {
      handler() {
        if (this.$refs.selectSearch) {
          this.$refs.selectSearch.doClose()
        }
      },
      deep: true,
      immediate: true,
    },
    popIsFocus: {
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            if (this.$refs.virtual) {
              this.$refs.virtual.reset()
            }
          })
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    listsOption() {
      //选择框隐藏后清空筛选条件
      if (!this.popIsFocus) {
        this.keyVal = null
      }
      if (this.options && this.options.length > 0) {
        if (this.keyVal !== '' && this.keyVal !== null) {
          let str = String(this.keyVal).toLowerCase()
          let results = this.options.filter((item) => {
            return (
              String(item.label).toLowerCase().includes(str) ||
              String(item.value).toLowerCase().includes(str)
            )
          })

          return JSON.parse(JSON.stringify(results))
        } else {
          return JSON.parse(JSON.stringify(this.options))
        }
      } else {
        return []
      }
    },
    hasVal() {
      if (
        this.queryName &&
        this.$route.query[this.queryName] &&
        this.$route.query[this.queryName] !== '' &&
        this.$route.query[this.queryName] !== null
      ) {
        return true
      } else {
        return false
      }
    },
  },
  methods: {
    handleClearFilterValNow(key) {
      this.checkList.splice(key, 1)
    },
    closePopover() {
      if (this.$refs.selectSearch) {
        this.$refs.selectSearch.doClose()
      }
    },
    handleClearAllSelected() {
      this.clear()
    },
    //判断是否有图片
    getImage(name) {
      try {
        const image = require('@/static/images/flags/' + name + '.png')
        if (image) {
          return image
        } else {
          return ''
        }
      } catch (error) {
        //console.log(error)
      }
    },
    hidePopover() {
      if (this.$refs.selectSearch) {
        this.$refs.selectSearch.doClose()
      }
    },

    /* 链接 */
    resetPath(item) {
      let newPath = { ...this.$route.query }
      if (this.queryName) {
        newPath[this.queryName] = item.value
      }

      for (let key in newPath) {
        if (newPath[key] === null || newPath[key] === '') {
          delete newPath[key]
        }
      }

      return { ...newPath }
    },

    clear() {
      let req = {
        ...this.$route.query,
      }

      for (let key in req) {
        if (key === this.queryName) {
          delete req[key]
        }
      }

      this.$router.push({
        path: this.$route.path,
        query: {
          ...req,
        },
      })

      if (this.$refs.selectSearch) {
        this.$refs.selectSearch.doClose()
      }
    },
  },
}
</script>
<style lang="scss">
.el-popper.sameSelect {
  padding: 0;
  .ipt-box {
    padding: 10px 14px 14px;
    .el-input__inner {
      height: 36px;
      line-height: 36px;
    }
    .el-input__icon {
      line-height: 36px;
    }
  }
  .list {
    padding: 0 0 10px;
    .list-inner {
      position: relative;
      height: 280px;
      overflow-x: hidden;
    }
  }
  .select-footer {
    padding: 0px 10px 10px;
    .el-button--mini {
      padding: 6px 10px;
      i {
        font-size: 14px;
        vertical-align: -1px;
      }
    }
  }
  .search-empty {
    padding: 15px;
    text-align: center;
  }
}
.sameSelect .el-scrollbar {
  .sidebar-wrap-inner {
    height: 100%;
    overflow-x: hidden;
    //padding: 12px 0;
  }
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
</style>
<style lang="scss" scoped>
.select-item-search .el-input__inner {
  padding-left: 15px;
  height: 36px;
  &::-webkit-input-placeholder {
    color: #7150e6 !important;
  }
}
.select-item-search {
  &:hover {
    cursor: pointer;
  }
}
.select-region {
  width: 100%;
  .el-input {
    ::v-deep .el-input__icon {
      line-height: 36px;
      &.el-icon-circle-close {
        display: none;
      }
    }
    &:hover {
      .el-icon-circle-close {
        display: block;
        & + .el-icon-arrow-up {
          display: none;
        }
      }
    }
  }
}
.select-item-special {
  &:hover {
    cursor: pointer;
  }
  > span {
    width: 100%;
  }
  .el-input {
    display: flex;
    align-items: center;
    .el-icon-map-location {
      position: absolute;
      left: 12px;
      top: 9px;
      color: #bbb5b5;
    }
    &.hadMore {
      .more {
        display: block;
      }
    }
    .more {
      display: none;
      position: absolute;
      right: 32px;
      top: 20px;
      color: #b0a3a3;
      line-height: 0;
      span {
        font-size: 12px;
      }
    }
  }
}
.el-popper.sameSelect {
  padding: 0;
  .list {
    padding: 0 0 10px 14px;
    .list-inner {
      position: relative;
      height: 280px;
      overflow: hidden;
      //border: 1px solid #d5d5d5;
      ::v-deep .el-checkbox__input {
        display: none;
      }
      ::v-deep .el-checkbox__label {
        padding-left: 0px;
      }
    }
  }
  .select-footer {
    padding: 0px 10px 10px;
    .el-button--mini {
      padding: 6px 10px;
      i {
        font-size: 14px;
        vertical-align: -1px;
      }
    }
  }
  .search-empty {
    padding: 15px;
    text-align: center;
  }
}
.list-box {
  position: relative;
  .title {
    color: #7150e6;
    background: #d1daf4ba;
    height: 42px;
    display: flex;
    padding: 0 20px;
    font-weight: bold;
    align-items: center;
    i {
      color: gray;
      font-size: 20px;
      margin-right: 9px;
    }
  }
  .list {
    position: relative;
    .list-item {
      position: relative;
      color: rgba(0, 0, 0, 0.52);
      /* &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 20px;
        right: 20px;
        height: 1px;
        background: #ece3e3;
      } */
      .list-title {
        height: 30px;
        line-height: 30px;
        padding: 0 16px;
      }
    }
  }
  ::v-deep .select-search-input {
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    input {
      border: 0;
    }
  }
}
.selected-tags {
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  overflow: hidden;
  right: 35px;
  left: 15px;
  top: 0;
  bottom: 0;
  overflow: hidden;
  -webkit-text-overflow: ellipsis;
  text-overflow: ellipsis;
  -webkit-white-space: nowrap;
  white-space: nowrap;
  font-size: 14px;
  color: #7150e6;
  line-height: 36px;
  .el-tag {
    height: 22px;
    padding: 0 8px;
    line-height: 20px;
    &:first-child {
      margin-left: 0;
    }
    ::v-deep .el-icon-close {
      font-size: 10px;
      height: 14px;
      width: 14px;
      top: 0;
      right: -5px;
      line-height: 14px;
    }
  }
}

.delBtn {
  display: none;
}
.selected {
  position: relative;
  font-size: 0;
  &:hover {
    button {
      padding-right: 36px !important;
      transition: all 0 !important;
    }
    .arrow {
      display: none !important;
      transition: all 0 !important;
    }
    .delBtn {
      position: absolute;
      right: 10px;
      top: 17px;
      transform: translateY(-50%);
      display: block;
      font-size: 20px;
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }
  }
}
.dropdown {
  height: 34px;
  border-radius: 17px;
  svg {
    transition: 0.2s;
    &.show {
      transform: rotate(180deg);
    }
  }
}
.group {
  height: 34px;
}
</style>
